<template>
  <view>
    <nav-bar title="选择课程"></nav-bar>
    <you-tabs
      :activeName="tabActive"
      :tabsList="tabsList"
      @tabClick="clickTabItem"
    ></you-tabs>
    <view class="desc">
      <div class="desc-left">训练计划课程可以多选</div>
      <view class="desc-right">已选：{{ chooseVideoList.length }}</view>
    </view>
    <view v-if="isLoading" class="common-loading">
      <image class="loading-img" :src="baseIconUrl + '/commonIcon/icon_loading.png'" />
      正在加载数据，请稍后......
    </view>
    <view
      class="common-no-data"
      v-else-if="!videoList || videoList.length === 0"
    >
      <image class="no-data-img" :src="baseIconUrl + '/commonIcon/icon_no_data.png'" />
      <view class="text">暂无课程~</view>
    </view>
    <scroll-view scroll-y :style="{ height: scrollHeight }" v-else class="collect-list">
      <view
        v-for="(item, index) in videoList" 
        :key="index"
      >
        <view :class="['content-box', chooseIds.includes(item.id) ? 'active-box' : '']">
          <view class="left-box" @click.stop>
            <video
              :id="'videoId'+ index"
              style="width: 100%; height: 100%"
              class="video"
              :src="item.videoUrl"
            ></video>    
          </view>
          <view class="right-box" @click="clickChooseIcon(item)">
            <view class="name">{{ item.title }}</view>
            <view class="choose-icon">
              <uni-icons
                v-if="chooseIds.includes(item.id)"
                type="checkbox-filled"
                color="#115BAA"
              ></uni-icons>
              <uni-icons
                v-else
                type="circle"
                color="#115BAA"
              ></uni-icons>
              {{ chooseIds.includes(item.id) ? '已选择' : '选择' }}
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
    <you-bottom-btn
      :btnConfig="bottomBtnConfig"
      @clickSubmit="clickSubmit"
      @clickCancel="clickCancel"
    ></you-bottom-btn>
  </view>
</template>

<script>
  import api_user from '@/api/user'
  import { baseUrl, baseImgUrl, baseIconUrl } from '@/config'
  export default {
    name: 'ChooseVideo',

    data() {
      return {
        baseUrl,
        baseImgUrl,
        baseIconUrl,
        scrollHeight: '',
        tabActive: 1,
        tabsList: [
          { label: "灵活性拉伸", name: 1 },
          { label: "强化肌肉核心", name: 2 },
          { label: "ADL姿势改善", name: 3 },
          { label: "侧弯矫正训练", name: 4 },
        ],
        bottomBtnConfig: [
          { text: '取消', class: 'cancel', funcName: 'clickCancel' },
          { text: '确认选择', class: 'confirm', funcName: 'clickSubmit' }
        ],
        videoList: [],
        isLoading: false,
        chooseVideoList: [],
        defaultVideoList: [],
        chooseIds: [],
        medicineId: '',
        patientId: '',
        patientName: '',
      }
    },

    onShow() {
      this.scrollHeight = this.$store.getters.heightData.noTabMainHeight - 48 - 40 - 85 + 'px'
      this.getVideoList()
    },
    onLoad(options) {
      if (options.chooseVideoList) {
        this.defaultVideoList = uni.$u.deepClone(JSON.parse(decodeURIComponent(options.chooseVideoList)))
        this.chooseVideoList = uni.$u.deepClone(this.defaultVideoList)
        this.chooseIds = this.chooseVideoList.map(item => item.id)
      }
      if (options.medicineId) {
        this.medicineId = options.medicineId
      }
      if (options.patientId) {
        this.patientId = options.patientId
      }
      if (options.patientName) {
        this.patientName = options.patientName
      }
    },

    methods: {
      clickTabItem(value) {
        this.tabActive = value
        this.getVideoList()
      },
      getVideoList() {
        this.isLoading = true
        const params = {
          pageNum: 1,
          pageSize: 10000,
          videoClass: this.tabActive
        }
        api_user.planVideoList(params).then(res => {
          if (res.code !== 200) return
          this.videoList = res.rows
          this.isLoading = false
        })
      },
      clickChooseIcon(item) {
        if (this.chooseIds.includes(item.id)) {
          this.chooseVideoList = this.chooseVideoList.filter(cItem => cItem.id !== item.id)
          this.chooseIds = this.chooseIds.filter(cItem => cItem !== item.id)
        } else {
          this.chooseVideoList.push(item)
          this.chooseIds.push(item.id)
        }
      },
      clickCancel() {
        const videoList = encodeURIComponent(JSON.stringify(this.defaultVideoList))
        uni.redirectTo({
          url: `/subPages/physicianTrainPlan/plan/addPlan?videoList=${videoList}&medicineId=${this.medicineId}&patientId=${this.patientId}&patientName=${this.patientName}`
        })
      },
      clickSubmit() {
        const videoList = encodeURIComponent(JSON.stringify(this.chooseVideoList))
        uni.redirectTo({
          url: `/subPages/physicianTrainPlan/plan/addPlan?videoList=${videoList}&medicineId=${this.medicineId}&patientId=${this.patientId}&patientName=${this.patientName}`
        })
      }
    },
  }
</script>
<style lang="scss">
  .content-box {
    display: flex;
    padding: 24rpx 30rpx;
    margin: 20rpx 0;
    border: 4rpx solid #FFF;
    border-radius: 16rpx;
    background-color: #FFF;
    .left-box {
      position: relative;
      width: 288rpx;
      height: 192rpx;
      margin-right: 20rpx;
      border-radius: 16rpx;
      overflow: hidden;
      video::-webkit-media-controls-play-button {
        display: none;
      }
      .prism-big-play-btn {
        position: absolute;
        transform: translate(-50%, -50%);
        left: 50%;
        top: 48%;
        width: 60rpx;
        height: 60rpx;
        background-size: contain;
        cursor: pointer;
        @keyframes warn {
          0% {
            transform: scale(0.5);
            opacity: 1;
          }

          30% {
            opacity: 1;
          }

          100% {
            transform: scale(1.4);
            opacity: 0;
          }
        }
      }
      .status-box {
        position: absolute;
        left: 0;
        top: 0;
        height: 40rpx;
        padding: 0 14rpx;
        border-radius: 16rpx 0 16rpx 0;
        line-height: 40rpx;
        font-size: 20rpx;
        color: #FFF;
      }
      .member-box {
        background: linear-gradient(146.01deg, #FF4E08 0%, #FF974D 100%);
      }
    }
    .right-box {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 16rpx 0;
      .name {
        font-size: 32rpx;
        font-weight: 500;
      }
      .choose-icon {
        width: 100%;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        color: #115BAA;
      }
    }
  }
  .active-box {
    border: 4rpx solid #115BAA;
  }
  .desc {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 28rpx;
    height: 40px;
    background-color: #FFF;
    color: #2A82E4;
  }
</style>
